<template>
  <myDisplayWrap breadcrumbs="我的意见反馈详情">
    <a-row class="userBox">
      <a-row class="titleBar">我的意见反馈详情</a-row>
      <a-row>
        <a-row>
          <a-card title="意见反馈信息">
            <table class="messageTable">
              <tbody>
              <tr>
                <td class="title-td">诉求单号</td>
                <td>{{detail.appealsNo}}</td>

                <td class="title-td">创建时间</td>
                <td>{{detail.createTime}}</td>
              </tr>
              <tr>
                <td class="title-td">内容</td>
                <td colspan="3" style="text-align:left;">
                  <p>{{detail.appealsContent}}</p>
                  <div class="MT10">
                    <a-upload
                      :file-list="fileList"
                      @preview="handlePreview"
                      list-type="picture-card"
                      :showUploadList="{showRemoveIcon:false}"
                    >
                    </a-upload>
                    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel" class="selectPhoto" :dialog-style="{ left: '-44px' }">
                      <img alt="example" style="width: 100%;cursor:zoom-in" :src="previewImage" @click="photoEnlarge(previewImage)" />
                    </a-modal>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="title-td">联系方式</td>
                <td colspan="3">{{detail.contact}}</td>
              </tr>
              </tbody>
            </table>
          </a-card>

          <a-card title="平台回复" class="MT20">
            <a-empty v-if="detail.status == '0'" :image="simpleImage" />
            <table v-else class="messageTable">
              <tbody>
              <tr>
                <td class="title-td">回复人</td>
                <td style="text-align:left">{{detail.publisher}}</td>
                <td class="title-td">回复时间</td>
                <td style="text-align:left">{{detail.replyTime}}</td>
              </tr>
              <tr>
                <td class="title-td">回复内容</td>
                <td colspan="3" style="text-align:left;">
                  <p>{{detail.replyContent}}</p>
                  <div class="MT10">
                    <a-upload
                      @preview="handlePreview"
                      list-type="picture-card"
                      :file-list="replyFileList"
                      :showUploadList="{showRemoveIcon:false}"
                    >
                    </a-upload>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </a-card>
        </a-row>
      </a-row>
    </a-row>
  </myDisplayWrap>
</template>

<script>
import myDisplayWrap from './components/myDisplayWrap.vue'
import { feedbackInfo } from "@/api/feedback/index.js";
import {isEmpty} from "@/utils/func";
import { reactive } from 'vue';
const statusMap = {
  0: '未回复',
  1: '已回复',
}
export default {
  components: {
    myDisplayWrap
  },
  data() {
    return {
      detail:{},
      previewVisible: false,
      previewImage: '',
      feedVisible:false,
      fileList:[],
      replyFileList:[],
      //表格加载圈
      tableLoading: false,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 80,
          customRender: (value, row, index) => `${index + 1}`
        },
        {
          title: '内容',
          dataIndex: 'appealscontent',
          // scopedSlots: { customRender: 'projectTitle' },

          align: 'center',
          width: "250px"
        },
        {
          title: '提交时间',
          dataIndex: 'replyTime',
          align: 'center',
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作',
          dataIndex: '',
          scopedSlots: { customRender: 'operate' },
          align: 'center'
        },
      ],
      //商品集合
      collectionGoods: [],

      pageSizeOptions: ['5', '10', '15', '20'],
      total: 0,//商品总数
      pageInfo: {
        limit: 10,
        page: 1
      },
      form: this.$form.createForm(this, { name: "mySourcing" }),
      tabList: [{
        dataSource: '',
        name: '全部'
      }, {
        dataSource: '0',
        name: '未回复'
      }, {
        dataSource: '1',
        name: '已回复'
      }],
      currentTab: '',
      statusMap,
      id: ''
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.getDetails(this.id)
  },
  filters:{
    priceFilter(value){
      return '￥'+value;
    }
  },
  methods: {
    getDetails(id){
      let params = {
        id: id
      }
      feedbackInfo(params).then(res => {
        if(res.code == 0) {
          this.detail = res.data
          let fileList = res.data.fileVOList;
          let replyFileList = res.data.replyFileVOList;
          this.fillFileData('1',fileList);
          this.fillFileData('2',replyFileList)
        }
      })
    },
    fillFileData(type,data) {
      if (data.length > 0) {
        if(type == '1'){
          this.fileList = [];
        }else{
          this.replyFileList = [];
        }
        for(let i in data){
          let file = {
            uid : i,
            name : data[i].fileName,
            status : 'done',
            url : data[i].fileUrl,
            response : {
              data: {
                storageFileId: data[i].storageFileId,
              },
            },
          }
          if(type == '1'){
            this.fileList.push(file);
          }else{
            this.replyFileList.push(file);
          }
          // let fileIds = '';
          // // 处理文件ID回填
          // fileIds += data[i].fileId;
          // if( i != data.length -1){
          //   fileIds += ',';
          // }
        }


        // this.fileIds = fileIds;
      }
      this.$nextTick(function(){
        this.childHeight();
      })
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    //图片放大效果
    photoEnlarge(val){
      console.log(val)
      window.open(val, "_blank");
    },
    handleCancel() {
      this.previewVisible = false;
    },
    onShowSizeChange(current, pageSize) {
      this.pageInfo.page =  1;
      this.pageInfo.limit = pageSize;
      this.loadData();
    },
    pageChange(pageNumber) {
      this.pageInfo.page = pageNumber;
      this.pageInfo.limit;
      this.loadData();
    },
    loadData(flag) {
      this.form.validateFields((error, values) => {
        console.log(values, 'value')
        if(flag) {
          this.pageInfo.page =  1;

        }
        let params = {
          queryType: 0,
          ...this.pageInfo
        }
        if(!isEmpty(values.time)) {
          params.quotationDeadlineStart = values.time[0] + ' 00:00:00'
          params.quotationDeadlineEnd = values.time[1] + ' 23:59:59'
        }
        params.projectTitleOrNum = values.projectTitleOrNum
        params.status = values.status ?  values.status : undefined
        params.supplySelMeth = values.supplySelMeth ?  values.supplySelMeth : undefined
        listPage(params).then(res => {
          if(res.code == 0) {
            this.collectionGoods = res.data.records
            this.total = res.data.total
            this.pageInfo.limit = res.data.size
            this.pageInfo.page = res.data.current
          }
        })
      })
    },
    resetBtn() {
      this.form.resetFields();
      this.loadData(true)
    },
    toDetail(demandId){
      this.$router.push({
        path: '/demand/detail',
        query: {demandId}
      })
    },
  },
  watch: {

  }
}
</script>

<style lang="scss" scoped>
.topBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;

  /*justify-content: space-around;*/
  .btn-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    margin-right: 30px;
    margin-bottom: 5px;
    padding: 0 20px;
    font-size: 14px;
    color: #4e4e4e;
    border: #cccc 1px solid;
    border-radius: 18px;
    cursor: pointer;

    &:hover {
      color: var(--antd-wave-shadow-color);
      border-color: var(--antd-wave-shadow-color);
    }

    &:last-child {
      margin-right: 0;
    }

    &.topButtonActive {
      background-color: var(--antd-wave-shadow-color);
      color: white;
      border-color: var(--antd-wave-shadow-color);
    }
  }
}


.userBox {
  padding: 0 24px;
  border-left: 4px solid #cccccc;
  margin-left: -1px;
  min-height: 650px;
}

.titleBar {
  width: 100%;
  height: 50px;
  line-height: 30px;
  padding: 10px;
  margin-bottom: 20px;
  background: #fff;
  border-bottom: 1px dashed #ccc;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}
</style>
